<template>
  <div class="second">
    <van-form @submit="onSubmit" ref="from">
      <van-cell-group :border="false">
        <!-- <div class="second-label">{{ t("login.whatsapp") }}</div>
        <van-field
          :border="false"
          v-model="data.whatsappId"
          name="WHATSAPP"
          class="dev-field"
          :type="showWhatsApp ? 'text' : 'password'"
          :placeholder="t('login.WHATSAPplace')"
        >
          <template #right-icon>
            <van-icon v-if="showWhatsApp" name="eye-o" @click="eye(false, 1)" />
            <van-icon v-else name="closed-eye" @click="eye(true, 1)" />
          </template>
        </van-field> -->
        <div class="second-label">{{ t("invitation.addCode") }}</div>
        <van-field
          :border="false"
          v-model="data.inviteCode"
          name="inviteCode"
          class="dev-field"
          :placeholder="t('invitation.addCodePlace')"
        >
        </van-field>
        <div class="second-label">{{ t("login.thirdpass") }}</div>
        <van-field
          v-model="data.password"
          :type="showpass ? 'text' : 'password'"
          name="password"
          class="dev-field"
          :placeholder="t('login.passplacehold')"
          :rules="[{ validator: validatorPassword }]"
        >
          <template #right-icon>
            <van-icon v-if="showpass" name="eye-o" @click="eye(false, 2)" />
            <van-icon v-else name="closed-eye" @click="eye(true, 2)" />
          </template>
        </van-field>
        <div class="second-label">{{ t("login.againpass") }}</div>
        <van-field
          v-model="data.againpassword"
          :type="showEye ? 'text' : 'password'"
          name="againpassword"
          class="dev-field"
          :placeholder="t('login.passplacehold')"
          :rules="[{ validator: validatorMessage }]"
        >
          <template #right-icon>
            <van-icon v-if="showEye" name="eye-o" @click="eye(false, 3)" />
            <van-icon v-else name="closed-eye" @click="eye(true, 3)" />
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
    <div class="submit">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        @click="onup"
        class="goback"
      >
        {{ t("login.goback") }}
      </van-button>
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        @click="onNext"
        class="donebtn"
      >
        {{ t("login.donebtn") }}
      </van-button>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "@vue/reactivity";
import { onMounted } from "vue";
import { Toast } from "vant";
import { defineEmits } from "vue";
import { useI18n } from "vue-i18n";
import { register } from "@/api/user";
const { t } = useI18n();
const emit = defineEmits(["onup", "onNext"]);
const checked = ref(false);
const showEye = ref(false);
const showWhatsApp = ref(false);
const showpass = ref(false);
const data = reactive({
  whatsappId: "",
  password: "",
  againpassword: "",
  inviteCode: "",
});
const password = ref("");
const props = defineProps({
  email: "",
});
onMounted(() => {
  data.inviteCode = localStorage.getItem("myCode") || "";
});
const from = ref(null);
//确认密码校验是否和密码相同是否为空
const validatorMessage = (val) => {
  if (val !== data.password) {
    return t("login.againmsg");
  } else if (!val) {
    return t("login.againpassmsg");
  }
};
//密码正则校验不能为中文，长度校验
const validatorPassword = (val) => {
  if (!val) {
    return t("login.passplacehold");
  } else if (val.length < 6 || val.length > 18) {
    return t("login.passLength");
  }
  let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
  if (reg.test(val)) {
    return t("login.passRrr");
  }
};
function eye(val, type) {
  switch (type) {
    case 1:
      showWhatsApp.value = val;
      break;
    case 2:
      showpass.value = val;
      break;
    case 3:
      showEye.value = val;
      break;
  }
}
function onup() {
  emit("onSubmit", { type: 2, isAdd: false });
}
async function onNext() {
  let vaild = await from.value.validate();
  register({ ...data, email: props.email })
    .then((res) => {
      if (res.code == 200) {
        Toast(res.msg);
        emit("onSubmit", { type: 2, isAdd: true });
      }
    })
    .catch((err) => {
      Toast(err);
    });
}
</script>
<style scoped lang="less">
.second {
  &-label {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: var(--van-nav-bar-icon-color);
    line-height: 14px;
    margin-top: 25px;
  }
  .submit {
    margin-top: 25px;
    text-align: center;
    display: flex;
    &-text {
      color: var(--van-primary-color);
      text-decoration: underline;
      margin-top: 17px;
      cursor: pointer;
    }
    .goback {
      width: 172px;
      height: 38px;
      background: #909090;
      border-radius: 19px;
      margin-right: 20px;
    }
    :deep(button.van-button.van-button--primary.van-button--normal.van-button--block.van-button--round.goback) {
      border-color: #909090;
    }
    .donebtn {
      width: 172px;
      height: 38px;
      background: #ff1fd9;
      border-radius: 19px;
    }
  }
}
</style>
